import DGDialogLayout from "../../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGTextView from "../../../../components/DGTextView.tsx";
import DGDrawerLayout from "../../../../components/DGDrawerLayout/DGDrawerLayout.tsx";
import {FC, useState} from "react";
import {useNavigate} from "react-router-dom";
import DGConnect from "../../../../sources/DGConnect.ts";
import AppProvider from "../../../../sources/AppProvider.ts";

interface SelfFormFreezeResultProps {
    state: boolean,
    switchView: (text: string) => void
}

const SelfFormFreezeResult: FC<SelfFormFreezeResultProps> = ({state, switchView}) => {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 冻结状态 0-初始，1-失败，2-超时和非法失败，3-成功
    const [freeze, setFreeze] = useState(0);
    // 错误信息
    const [error, setError] = useState({state: false, text: ""});

    // 面板控制
    const handleClose = () => {
        // 关闭面板
        switchView("");
        // 设置开始冻结初始状态
        setFreeze(0);
        // 清空错误信息
        setError({state: false, text: ''});
        // 后退路由
        router(-1);
    }

    // 提交函数
    const handleSubmit = () => {
        // 开始加载
        setLoading(true);
        // 设置开始冻结初始状态
        setFreeze(0);
        // 请求冻结账户
        DGConnect.POST(JSON.stringify({type: "freeze", submit: 1}), result => {
            // 关闭加载
            setLoading(false);
            // 判断错误信息
            if (result['data']['code'] !== 200) {
                // 设置失败状态
                setFreeze(1);
                // 超时和非法访问设置
                if (result['data']['code'] === 999) setFreeze(2);
                // 设置错误信息
                return setError({state: true, text: result['data']['message']});
            }
            // 冻结成功
            setFreeze(3);
            // 判断是否相同账户
            if (result['data']['result'] === true) {
                setTimeout(() => {
                    // 提示冻结
                    alert("您当前登录的账号在刚刚进行了自助冻结操作，将会自动退出登录！");
                    // 退出登录
                    App?.setUserInfo(null);
                }, 1000);
            }
        }, err => {
            // 关闭加载
            setLoading(false);
            // 设置失败状态
            setFreeze(1);
            // 设置错误信息
            setError({state: true, text: String(err['stack'])})
        });
    }


    // ContentView
    const ContentView = (<>
        {/* 冻结前提示 */}
        {freeze === 0 && <DGTextView Body Bold color="primary">
            点击冻结按钮将会进行冻结您的账户，您确定要冻结吗？
        </DGTextView>}

        {/* 冻结失败提示 */}
        {freeze === 1 && error.state && <DGTextView Body Bold color="error">
            发生了一些错误，请尝试重试，或及时联系我们。错误信息：{error.text}
        </DGTextView>}

        {/* 冻结失败超时或非法访问提示 */}
        {freeze === 2 && error.state && <DGTextView Body Bold color="error">
            发生了一些错误，请尝试重试，或及时联系我们。错误信息：{error.text}
        </DGTextView>}

        {/* 冻结成功提示 */}
        {freeze === 3 && <DGTextView Body Bold color="warning">
            已成功冻结您的账户，您的账户被冻结，将会停止一切账户活动，后续如需解除冻结状态请前往自助解除冻结。
        </DGTextView>}
    </>);

    return (<>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            submit={(freeze !== 3 && freeze !== 2) && {name: "冻结", click: () => handleSubmit()} || undefined}
            title="自助冻结" state={state} load={loading} close={() => handleClose()} PANEL AUTO>
            {ContentView}
        </DGDialogLayout>
        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout
            submit={(freeze !== 3 && freeze !== 2) && {name: "冻结", click: () => handleSubmit()} || undefined}
            title="自助冻结" state={state} load={loading} close={() => handleClose()} flex="bottom" PANEL AUTO>
            {ContentView}
        </DGDrawerLayout>
    </>);
}
export default SelfFormFreezeResult;